<!--
 * @Descripttion:
 * @Author: hsg
 * @Date: 2020-11-27 10:26:13
 * @LastEditors: hsg
 * @LastEditTime: 2020-12-02 17:54:26
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>积分商城</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="__ROOT__/Addons/IntegralShop/Public/css/index.css"/>
    <link rel="stylesheet" href="__ROOT__/Addons/IntegralShop/Public/css/home.css"/>
    {:hook('jssdk',false)}
</head>

<body>
<div id="app">
    <van-overlay :show="overlayShow">
        <div class="wrapper" @click.stop>
            <van-image width="80%" height="80%" fit="contain" :src="mp_code"/>
        </div>
    </van-overlay>
    <div class="home" v-show="active == 0">
        <van-swipe class="home-swipe" :autoplay="3000">
            <van-swipe-item v-for="(thumb,index) in images" :key="index">
                <img :src="thumb.image" :height="imageHeight">
            </van-swipe-item>
        </van-swipe>

        <van-empty class="custom-image" v-if="listIsNull"
                   image="__ROOT__/Addons/IntegralShop/Public/images/custom-empty-image.png"
                   description="商品为空"></van-empty>
        <van-pull-refresh v-else="!listIsNull" v-model="refreshing" @refresh="onRefresh">
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <van-card :num="item.number" :origin-price="item.price" :thumb="item.cover" v-for="item in list"
                          :key="item.id">
                    <template #title>
                        <h3 class="van-multi-ellipsis--l2">{{ item.name}}</h3>
                    </template>
                    <template #price>
                        <van-icon name="points" color="#faab0c" size="14px"/>
                        <span
                                style="color:#FDAE02;font-size: 14px;"> {{item.need_mark}}</span>
                    </template>
                    <template #footer>
                        <a :href="'{: create_mobile_url('exchangeShop') }&good_id='+ item.id">
                            <van-button round size="small" class="btnBg">兑换</van-button>
                        </a>
                    </template>
                </van-card>
            </van-list>
        </van-pull-refresh>
    </div>
    <div class="person" v-show="active == 1">
        <div class="head" :style="'height:'+ imageHeight">
            <div style="height: 6rem;text-align: center;color: #fff;">
                <van-image round width="5rem" height="5rem" :src="headimgurl"></van-image>
                <p>{{nickname}} </p>
            </div>

        </div>
        <van-row class="aboutBox" type="flex" justify="space-around">
            <van-col span="10">
                <div class="allMessage">
                    <h3 style="white-space:nowrap;"> 积分： <span>{{mark}}</span></h3>
                </div>
            </van-col>
            <van-col span="10">
                <div class="allMessage">
                    <h3 style="white-space:nowrap;"> 推广：<span>{{spread_num}}</span></h3>
                </div>
            </van-col>
        </van-row>
        <div class="listBox">
            <h1>积分记录</h1>
            <ul>
                <li v-for="item in recordsList" :key="item.id">
                    <p>{{item.event_content}}</p>
                    <p>{{item.created_at +" " +item.text}}
                        <span :style="'color:'+item.color">{{item.mark}}</span>
                        积分
                    </p>
                </li>
            </ul>
        </div>
        <div class="listBox listBox2">
            <h1>订单记录</h1>
            <ul>
                <li v-for="item in ordersList" :key="item.id" @click="clickOrder(item)">
                    <p :style="'color:'+item.color">{{item.goodInfo.name}}</p>
                    <p :style="'color:'+item.color">
                        {{item.created_at +" 消费"+ item.need_mark +"积分"}}
                    </p>
                </li>
            </ul>
        </div>
    </div>
    <van-popup v-model:show="show" class="popupBox">
        <h4 class="popupTitle">兑换"{{order.name}}" 物流</h4>
        <div class="orderNum" v-show="order.status == 1">
            快递单号: <span class="numder">{{order.courier_number}}</span>
            <van-tag round plain type="primary" @click="copyNumber(order.courier_number)">复制</van-tag>
        </div>
        <div class="orderNum" v-show="order.status == -1">{{order.err_msg}}</div>
        <div class="orderNum" v-show="order.status == 0">订单待处理</div>
    </van-popup>
    <input type="text" hidden :value="copyText" id="copyText">
    <van-tabbar v-model="active" active-color="#FDAE02" inactive-color="#858A9A" @change="onTabbar">
        <van-tabbar-item icon="shop-o">商店</van-tabbar-item>
        <van-tabbar-item icon="setting-o">个人中心</van-tabbar-item>
    </van-tabbar>


</div>

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="__ROOT__/Addons/IntegralShop/Public/js/vue.min.js"></script>
<script src="__ROOT__/Addons/IntegralShop/Public/js/vant.min.js"></script>
<script src="__ROOT__/Addons/IntegralShop/Public/js/axios.min.js"></script>
<script src="__ROOT__/Addons/IntegralShop/Public/js/jweixin-1.6.0.js"></script>

<script>
    const PAGE_INDEX = "{:create_mobile_url('index')}";
    const API_INIT_URL = "{:create_mobile_url('api_init')}";
    const API_RECORDS_URL = "{:create_mobile_url('api_records')}";
    const API_ORDERS_URL = "{:create_mobile_url('api_orders')}";
    const API_USER_INIT_URL = "{:create_mobile_url('api_user_init')}";
    const API_GOODS_URL = "{:create_mobile_url('api_goods')}";
</script>
<script>




    // 初始化 Vue 实例
    const that = new Vue({
        el: '#app',
        data() {
            return {
                isLoading: false,
                active: 0,
                show: false,
                listIsNull: false,
                images: [],
                page: 0,
                size: 10,
                list: [],
                loading: false,
                finished: false,
                refreshing: false,
                recordsList: [],
                ordersList: [],
                nickname: '',
                headimgurl: '',
                spread_num: '',
                mark: '',
                mp_code: '',
                overlayShow: false,
                popupMessage: {},
                order: {},
                copyText: ''
            };
        },

        created() {
            /**
             * @Author: hsg
             * @Date: 2020-12-02 13:54:53
             * @Descripttion: 请求用户信息
             * @param {*}
             */
            axios.get(API_INIT_URL)
                .then(function (response) {
                    const data = response.data.data
                    that.initSlideshow(data)
                    that.subscribe(data)
                    that.initShare(data)
                })
                .catch(function (error) {
                    console.log(error);
                });

            /**
             * @Author: hsg
             * @Date: 2020-12-02 14:02:48
             * @Descripttion: 请求积分交易记录
             * @param {*}
             */
            axios.get(API_RECORDS_URL)
                .then(function (response) {
                    that.recordsList = response.data.data.list.map(item => {
                        item.text = item.mark_op_type == 1 ? "获取 " : "扣除 ";
                        item.color = item.mark_op_type == 1 ? "#FDAE02 " : "#ff0000 ";
                        return item
                    });
                })
                .catch(function (error) {
                    console.log(error);
                });
            /**
             * @Author: hsg
             * @Date: 2020-12-02 14:03:22
             * @Descripttion: 请求商品订单列表
             * @param {*}
             */
            axios.get(API_ORDERS_URL)
                .then(function (response) {
                    that.ordersList = response.data.data.list.map(item => {
                        item.status = Number(item.status)
                        switch (item.status) {
                            case -1:
                                item.color = 'red';
                                break;
                            case 0:
                                item.color = 'rgb(76, 148, 230)';
                                break;
                            case 1:
                                item.color = 'green';
                                break;
                        }
                        return item
                    });
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        mounted() {
            // 判断是个人中心页面还是首页
            this.active = Number(this.getQueryVariable('active'))
        },
        computed: {
            // 获取头部空间的高度
            imageHeight: function () {
                return `${document.body.clientWidth / 16 * 9}px`
            },
        },
        methods: {
            /**
             * @Author: hsg
             * @Date: 2020-12-02 13:57:14
             * @Descripttion: 初始化用户信息与轮播图
             * @param {*} data
             */
            initSlideshow(data) {
                that.nickname = data.nickname;
                that.headimgurl = data.headimgurl;
                that.mark = data.mark;
                that.spread_num = data.spread_num;
                const basic = data.conf.basic;
                that.mp_code = basic.mp_code;
                that.images = [{image: basic.ad1, url: basic.ad1url}, {
                    image: basic.ad2,
                    url: basic.ad2url
                }, {image: basic.ad3, url: basic.ad3url}].filter(item => item.image !== '')

            },
            /**
             * @Author: hsg
             * @Date: 2020-12-02 14:00:24
             * @Descripttion: 判断用户是否需要关注公众号
             * @param {*} data
             */
            subscribe(data) {
                if (data.is_subscribe == 0 && data.conf.spread && data.conf.spread.spread_need_subscribe == 1) {
                    that.overlayShow = true;
                } else if (data.mark == -1) {
                    axios.get(API_USER_INIT_URL, {
                        params: {un: this.getQueryVariable('un')}
                    })
                        .then(function (response) {
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            },
            /**
             * @Author: hsg
             * @Date: 2020-12-02 14:01:39
             * @Descripttion: 初始化分享链接样式
             * @param {*} data
             */
            initShare(data) {
                const share = data.conf.share || {};
                wx.ready(function () {
                    wx.onMenuShareTimeline({
                        title: share.share_title, // 分享标题
                        link: PAGE_INDEX+"&un="+data.un, // 分享链接
                        imgUrl: share.share_imgs
                    });
                    wx.onMenuShareAppMessage({
                        title: share.share_title, // 分享标题
                        desc: share.share_desc, // 分享链接
                        link: PAGE_INDEX+"&un="+data.un, // 分享链接
                        imgUrl: share.share_imgs, // 分享图标
                        type: "", // 分享类型,music、video或link，不填默认为link
                        dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
                        success: function () {
                            // 用户确认分享后执行的回调函数
                        },
                        cancel: function () {
                            // 用户取消分享后执行的回调函数
                        }
                    });
                });
            },
            /**
             * @Author: hsg
             * @Date: 2020-12-02 14:12:26
             * @Descripttion: 初始化加载数据列表
             * @param {*}
             */
            onTabbar() {
                if (this.list.length === 0) {
                    this.onRefresh()
                }
            },
            /**
             * @Author: hsg
             * @Date: 2020-12-02 14:12:39
             * @Descripttion: 加载数据列表
             * @param {*}
             */
            onLoad() {
                this.page++
                axios.get(API_GOODS_URL, {
                    params: {
                        page: this.page,
                        size: this.size,
                    }
                }).then(function (response) {
                    if (that.refreshing) {
                        that.list = [];
                        that.refreshing = false;
                    }
                    that.list.push(...response.data.data.list);
                    that.loading = false;
                    that.finished = response.data.data.list.length < that.size;
                    that.listIsNull = that.list.length === 0;
                })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            /**
             * @Author: hsg
             * @Date: 2020-12-02 14:12:54
             * @Descripttion: 下拉刷新
             * @param {*}
             */
            onRefresh() {
                this.page = 0
                this.finished = false;
                this.loading = true;
                this.onLoad();
            },
            /**
             * @Author: hsg
             * @Date: 2020-12-02 14:13:12
             * @Descripttion: 查看订单详情
             * @param {*} item
             */
            clickOrder(item) {
                this.order = {
                    name: item.goodInfo.name,
                    courier_number: item.courier_number,
                    status: item.status,
                    err_msg: item.err_msg
                }
                this.show = true;
            },
            /**
             * @Author: hsg
             * @Date: 2020-12-02 14:13:34
             * @Descripttion: 获取链接参数
             * @param {*} variable 参数字段
             */
            getQueryVariable(variable) {
                let query = window.location.search.substring(1);
                let vars = query.split("&");
                for (let i = 0; i < vars.length; i++) {
                    let pair = vars[i].split("=");
                    if (pair[0] == variable) {
                        return pair[1];
                    }
                }
                return 0;
            },
            /**
             * @Author: hsg
             * @Date: 2020-12-02 14:14:04
             * @Descripttion: 复制
             * @param {*} number 复制值
             */
            copyNumber(number) {
                this.copyText = number;
                const copyobject = document.getElementById("copyText");
                copyobject.select();
                document.execCommand("Copy");
                vant.Toast('复制成功');
            }
        }
    });
</script>
</body>

</html>
